<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>五子棋在线对战</title>

  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- 引入样式 -->
  <!--  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.10.0/lib/theme-chalk/index.css">

  <!-- 引入组件库 -->
  <!--  <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.10.0/lib/index.js"></script>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  <script th:src="@{/js/msg_util.js}"></script>
  <script th:src="@{/js/request.js}"></script>
  <script th:src="@{/js/util.js}"></script>
  <script th:src="@{/js/sockjs.js}"></script>
  <script th:src="@{/js/stomp.js}"></script>

  <!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js"></script>-->

  <!--  <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.3.0/sockjs.js"></script>-->


  <style>
    canvas {
      cursor: crosshair;
      display: block;
    }
  </style>
</head>
<body>
<div id="app">

  <canvas id="canvas" v-bind:class="animationZIndex" style="position: absolute"></canvas>

  <div>
    <audio th:src="@{/audio/placehuman.mp3}" id="place-human" controls="controls" loop="false"
           hidden="true" autoplay="false"></audio>
  </div>
  <!--  <script th:src="@{/js/main-animation.js}"></script>-->

  <div v-if="!showHeaderFlag" style="position: fixed; width: 100%">
    <span style="float: right;margin-right: 10%;">
              <el-button type="text" @click="showHeader">展开</el-button>
    </span>
  </div>
  <div id="header">
    <el-row class="header-row">
      <el-col :span="8" :offset="8" style="text-align: center">
        <span th:text="${GAME_NAME}" style="font-size: 20px;"></span>
      </el-col>
      <el-col :span="3" :offset="2">
        <span th:text="'游戏ID：&nbsp;'+ ${GAME_BRIEF_ID}"></span>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="text" @click="hideHeader">收起</el-button>
      </el-col>
    </el-row>


    <el-row :gutter="20" class="header-row">
      <el-col :span="5" :offset="3">
        <!--        <el-card :body-style="{ padding: '0px' }" v-bind:class="hightlightCard" class="player-card">-->
        <div style="" class="player-info-div">

          <div>
            <el-avatar src="/img/me.jpg"></el-avatar>
          </div>

          <el-divider direction="vertical"></el-divider>
          <div class="info-div">
            <div>{{ mn }} 【 我 】</div>
            <div class="bottom clearfix win-count">
              <span>获胜回合数： {{mw}}</span>
            </div>
            <div class="bottom clearfix">
              <span>积分：</span>
              <span class="win-integral">{{mi}}</span>
            </div>
          </div>

        </div>
        <!--        </el-card>-->
      </el-col>
      <el-col :span="8" style="text-align: center">
        <span style="font-size: 20px;">ROUND {{ roundNo }}</span>
        <el-divider></el-divider>

        <div class="grid-content bg-purple" style="text-align: center">
          <el-button @click="startRound" size="small">开始</el-button>
          <el-button @click="resetRound" type="warning" size="small" v-if="IS_CREATOR">重置</el-button>
          <el-button @click="displayLast" size="small" v-if="GAME_STATE == 2">上一步</el-button>
          <el-button @click="surrenderRound" type="danger" size="small" v-if="GAME_STATE == 2">投降</el-button>
          <el-button @click="begForChance" type="warning" size="small" v-if="GAME_STATE == 2">悔棋</el-button>
        </div>
      </el-col>
      <el-col :span="5">
        <!--        <el-card :body-style="{ padding: '0px' }" v-bind:class="hightlightCard2" class="player-card">-->
        <div style="padding: 14px;" class="player-info-div">
          <div>
            <el-avatar src="/img/oth.jpg"></el-avatar>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="info-div">
            <div>{{ on }}</div>
            <div class="bottom clearfix win-count">
              <span>获胜回合数： {{ow}}</span>
            </div>
            <div class="bottom clearfix">
              <span>积分： </span>
              <span class="win-integral">{{oi}}</span>

            </div>
          </div>

        </div>
        <!--        </el-card>-->
      </el-col>
    </el-row>
    <el-row class="header-row" v-if="GAME_STATE > 0" style="margin-top: 20px;">
      <el-col :span="8" :offset="8">
        <div class="grid-content bg-purple">
          <el-input
            placeholder="输入要向对方说的话，回车以发送"
            v-model="msgToSend"
            clearable
            maxlength="200"
            show-word-limit
            @keyup.enter.native="sendMsgToPlayer">
          </el-input>
        </div>
      </el-col>
    </el-row>

  </div>
  <div id="gomoku-layout-div">
    <el-card style="margin-bottom: 90px;">
      <template>
        <template v-for="m in rowTotal">
          <template v-for="n in colTotal">

            <!--            <my-card :class="[ 'chessman-out', getMyColor(m,n)]"-->
            <!--                     :data-x="m-1"-->
            <!--                     :data-y="n-1"-->
            <!--                     :data-z="0"-->
            <!--                     @click.native="modChess(m-1,n-1)">-->
            <!--              <div class="chessman"></div>-->
            <!--            </my-card>-->
            <!--            <div>{{m,n}}</div>-->
            <el-card
              :class="['chessman-out',  getMyColor(m,n) ]"
              shadow="never"
              :data-x="m-1"
              :data-y="n-1"
              :data-z="0"
              @click.native="modChess(m-1,n-1)">
              <div class="chessman"></div>
            </el-card>

          </template>
          <br>
        </template>
      </template>
    </el-card>

  </div>
  <div class="footer">
    <div class="foot text-center">&copy;2019-2020 lss All Rights Reserved.
    </div>
  </div>

</div>

<script th:src="@{/js/main.js}"></script>

<script th:src="@{/js/main-animation.js}"></script>


</body>
<style scoped>

  * {
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    /*height: 100%;*/
    /*background: #8c939d;*/
    background-color: #E8E8E8;

    /*background-blend-mode: multiply;*/
    /*background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);*/
    /*background-image:  linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);*/
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
  }


  .player-card {
    background: transparent;
    border-radius: 37px;

  }

  #gomoku-layout-div {
    width: 80%;
    height: 80%;
    /*text-align: center;*/
    /*align-items: center;*/
    padding-top: 265px;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    font-size: 0;
    cursor: crosshair;


  }

  .hide-chess {
    visibility: hidden;
  }

  #app {
    height: 100%;

  }


  #header {
    text-align: center;
    width: 84%;
    position: fixed;
    margin-left: 8%;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    /*background-color: transparent;*/
    padding-bottom: 20px;
    box-shadow: 1px 1px 10px #F5F5F5;
    border-radius: 3px 3px 15px 15px;
  }

  .header-row {
    margin-top: 7px;
  }

  .chessman-out {
    width: 5.1%;
    display: inline-block;
    height: 0;
    padding-bottom: 5.1%;
    /*border-color: #E8E8E8;*/
  }

  .chessman-out .el-card__body {
    padding: 5px;
  }

  .chessman {
    /*width: 5.26316%;*/
    width: 100%;
    /*display: inline-block;*/
    /*float: left;*/
    /*margin: -2.5px;*/
    /*height: 100%;*/
    padding-bottom: 100%;
    /*background-color: #000;*/
    /*line-height: ;*/
    border-radius: 50%;
    /*position: relative;*/
    /*overflow: hidden;*/
  }


  .chessman2 {
    background: black;
    height: 100px;
    position: relative;
    width: 5px;
    display: inline-block;

  }

  .chessman2:after {
    background: black;
    content: "";
    height: 5px;
    left: -45px;
    position: absolute;
    top: 45px;
    width: 100px;
  }

  div {
    margin: 0;
    padding: 0;
  }

  .p1 {
    background-color: #00BFFF;
  }

  .active-nick {
    color: #1E90FF;
  }

  .active-me-chess {
    color: #F08080;
    font-size: 20px;
  }

  .lower {
    z-index: -10;
  }

  .p2 {
    background-color: #000000;
  }

  .p3 {
    background-color: #FF1493;
  }

  .highlight-card {
    background-color: #87CEFA4d;
  }

  .player-info-div {
    display: flex;
    flex-direction: row;
    padding: 14px;

  }

  .footer {
    height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%

  }

  .foot {
    font-size: 14px;
    padding-top: 10px;
    color: #000;
    align-content: center;
    text-align: center;
  }

  input {
    background: transparent;
  }

  input::-webkit-input-placeholder {
    color: #000000;
  }

  input:-ms-input-placeholder {
  / / IE10 + color: #000000;
  }

  input:-moz-placeholder {
  / / Firefox4-18 color: #000000;
  }

  input::-moz-placeholder {
  / / Firefox19 + color: #000000;
  }

  .color-red {
    /*background-color: #B9A7C2;*/
  }

  .color-green {
    background-color: #B6D0C9;
  }

  .color-blue {
    background-color: #C2DFEA;
  }

  .color-black {
    background-color: #DCC6C6;
  }

  .color-grey {
    background-color: #fafbfc;
  }

  .my-div {
    width: 50px;
    height: 50px;
  }

  .info-div {
    text-align: left;
  }

  .win-count {
    padding-top: 10px;
    color: #363636;
    font-size: 16px;
  }

  .win-integral {
    color: cadetblue;
    font-size: 25px;
  }


  .dot {
    position: relative;
    overflow: hidden;
  }

  .dot:after {
    content: ' ';
    position: absolute;
    z-index: 10000;
    width: 10px;
    height: 10px;
    background-color: #e6a23c;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1) inset;
    -webkit-animation-name: 'ripple'; /*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 0.5s; /*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
    -webkit-animation-delay: 0s; /*动画延迟时间*/
    -webkit-animation-iteration-count: infinite; /*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal; /*定义动画方式*/
  }

  @keyframes ripple {
    0% {
      left: 0%;
      top: 00%;
      opacity: 25;
      width: 100%;
      height: 100%;
    }
    100% {
      left:0%;
      top:0%;
      /*left: 0;*/
      /*top: 0;*/
      opacity: 0;
      width: 100%;
      height: 100%;
    }
  }

</style>
</html>